﻿
@{
    ViewBag.Title = Resources.WebStringsWeb.WebTitle;
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}
@section css {
    <style>
        .imgicon {
            width: 3.2rem
        }

        .mui-badge {
            font-size: 10px;
            line-height: 1.4;
            position: absolute;
            top: 2px;
            left: 100%;
            margin-left: -35px;
            padding: 1px 5px;
            color: #fff;
            background: red;
        }
    </style>
}
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable" ng-controller="HomeController" ng-init="InitMenubar();GetMainMenu();GetTaskCount();">
    <aside id="offCanvasSide" class="mui-off-canvas-left">
        <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" style="margin-top:50px;">
                    <li class="mui-table-view-cell mui-media">
                        <a class="mui-navigate-right" href="#account">
                            <img class="mui-media-object mui-pull-left head-img" id="head-img" src="~/Assets/img/headimg/user.png">
                            <div class="mui-media-body">
                                {{User.UserName}}
                                <p class="mui-ellipsis">账号:{{User.UserNo}}</p>
                            </div>
                        </a>
                    </li>
                </ul>
                @*<ul style="margin-top:40px;" class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right">
                                修改密码
                            </a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right">
                                修改个人信息
                            </a>
                        </li>

                    </ul>*@
            </div>
        </div>
    </aside>
    <div class="mui-inner-wrap">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-icon mui-icon-bars" id="offCanvasShow"></a>
            <a ontouchstart="scanCode();" class="mui-icon-extra mui-icon-extra-sweep mui-pull-right" style="margin-right: -10px; margin-top: 10px; padding-right: 10px; padding-left: 10px;"></a>
            <h1 class="mui-title" style="color:white;">工作台</h1>
        </header>
        <div class="mui-content mui-scroll-wrapper" id="offCanvasContentScroll">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <ul class="mui-table-view mui-grid-view mui-grid-9" style="top:44px;" id="mlist">
                        <li ng-repeat="x in HomeMenuList" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                            <a id="link_{{x.Id}}" ng-href="{{x.Link}}?token=@ViewBag.MyToken">
                                <span><img ng-src="{{x.MenuImg}}" class="imgicon" /><span class="mui-badge" id="{{x.NumberId}}" ng-show="x.NumberId!=null&& TaskCount>0">0</span></span>
                                <div class="mui-media-body" style="font-size:13px;">{{x.MenuText}}</div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
@section js{
    <script src="~/Assets/js/pg/Home.js?v=@DateTime.Now.ToString("yyyyMMddHH")"></script>
    <script src="~/Assets/js/base/app-jssdk.umd.min.js"></script>
    <script>
        mui.init({
            swipeBack: false //启用右滑关闭功能
        });


        function scanCode() {
            var result = {
                "result": "{\"placeId\":108,\"roomId\":109,\"placeName\":\"张江2号楼403用户支持BU\"}"
            };

            var place = eval('(' + result.result + ')');

            if (place.placeId != null && place.roomId != null && place.placeName != null) {
                location.href = '../Home/MPlaceWork?PlaceId=' + place.placeId + "&RoomId=" + place.roomId + "&PlaceName=" + place.placeName;
            }



            lx.device.scanCode({
                type: ["qrCode", "barCode"],
                success: function (res) {
                    var place = JSON.parse(res.result);

                    if (place.placeId != null && place.roomId != null && place.placeName != null) {
                        location.href = '../Home/MPlaceWork?PlaceId=' + place.placeId + "&RoomId=" + place.roomId + "&PlaceName=" + place.placeName;
                    }

                    else if (place.parkId != null) {
                        location.href = '../Home/MPark?ParkId=' + place.parkId + "&ParkName=" + place.parkName;
                    }

                    else if (place.buildingId != null) {
                        location.href = '../Home/MPark?BuildingId=' + place.buildingId + "&BuildingName=" + place.buildingName;
                    }
                },
                fail: function (err) {
                    mui.toast(JSON.stringify(err));
                }
            });
        }

        mui.init();
        //侧滑容器父节点
        var offCanvasWrapper = mui('#offCanvasWrapper');
        //主界面容器
        var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
        //菜单容器
        var offCanvasSide = document.getElementById("offCanvasSide");

        //移动效果是否为整体移动
        var moveTogether = false;
        //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
        var classList = offCanvasWrapper[0].classList;
        //变换侧滑动画移动效果；
        mui('.mui-input-group').on('change', 'input', function () {
            if (this.checked) {
                offCanvasSide.classList.remove('mui-transitioning');
                offCanvasSide.setAttribute('style', '');
                classList.remove('mui-slide-in');
                classList.remove('mui-scalable');
                switch (this.value) {
                    case 'main-move':
                        if (moveTogether) {
                            //仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
                            offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
                        }
                        break;
                    case 'main-move-scalable':
                        if (moveTogether) {
                            //仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
                            offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
                        }
                        classList.add('mui-scalable');
                        break;
                    case 'menu-move':
                        classList.add('mui-slide-in');
                        break;
                    case 'all-move':
                        moveTogether = true;
                        //整体滑动时，侧滑菜单在inner-wrap内
                        offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
                        break;
                }
                offCanvasWrapper.offCanvas().refresh();
            }
        });
        //主界面‘显示侧滑菜单’按钮的点击事件
        document.getElementById('offCanvasShow').addEventListener('tap', function () {
            offCanvasWrapper.offCanvas('show');
        });

        //主界面和侧滑菜单界面均支持区域滚动；
        mui('#offCanvasSideScroll').scroll();
        mui('#offCanvasContentScroll').scroll();
        //实现ios平台原生侧滑关闭页面；
        if (mui.os.plus && mui.os.ios) {
            mui.plusReady(function () { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
                plus.webview.currentWebview().setStyle({
                    'popGesture': 'none'
                });
            });
        }

    </script>

}

